<template>
	<view class="aside-container" style="padding:30rpx;">
			<navigator class="user-info ft" :class="themeType==='light'?'bgc-deep-light':'bgc-deep'" url="/pages/user/user">
				<image class="avatar" :src="userInfo.profile.avatarUrl" :lazy-load="true" mode="widthFix"></image>
				<view class="user">
					<text class="uname ft">{{userInfo.profile.nickname}}</text><uni-icons type="forward" color="#fff"></uni-icons>
				</view>
				<text class="icon iconfont icon-saomiao" @click.native.stop="scanCode"></text>
			</navigator>
			<uni-list class="fun-list">
			    <uni-list-item title="我的动态" :show-badge="true" badge-text="12" to="/pages/event/event"></uni-list-item>
			    <uni-list-item title="夜间模式"  :show-switch="true" :switch-checked="themeType==='dark'?true:false" @switchChange="switchChange" ></uni-list-item>
			    <uni-list-item title="退出登录/切换账号" @click.native="logout"></uni-list-item>
			</uni-list>
	</view>
</template>

<script>
import { mapMutations,mapState,mapActions} from 'vuex';
export default{
	computed:{
		...mapState(['themeType','userInfo'])
	},
	methods:{
		...mapActions (['logout']),
		...mapMutations(['changeTheme']),
		switchChange(v){
			this.changeTheme()
		},
		scanCode(){
			//#ifndef H5
			uni.scanCode({
			    success: function (res) {
			        console.log('条码类型：' + res.scanType);
			        console.log('条码内容：' + res.result);
			    },
			});
			//#endif
		}
	}
}
</script>

<style lang="scss" scoped>
.aside-container{
	/*  #ifdef  APP-PLUS  */
	padding: 66rpx 10rpx 10rpx !important;
	/*  #endif  */
	height: 100%;
	display: flex;
	flex-direction: column;
	.user-info{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 20rpx;
		padding: 10rpx 20rpx;
		.avatar{
			width: 100rpx;
			border-radius: 50%;
		}
		.user{
		  margin-left:-192rpx ;
		}
		/*  #ifdef  MP-WEIXIN */
		.user{
		  margin-left:-142rpx ;
		}
		/*  #endif  */
	}
	.fun-list{
		flex: 1;
		::v-deep.uni-list-item{
			margin-top: 20rpx;
			// background-color: $uni-bg-color-grey;
			.uni-badge--success{
				background-color: red!important;
			}
		}
		::v-deep.uni-list--border-top{
			height: 0;
		}
		::v-deep.uni-list--border{
			&::after{
				height: 0;
			}
		}
	}
}
</style>
